<template>
  <el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl"
             custom-class="drawer-right-side" :before-close="closeDrawer" append-to-body
  >
    <el-form class="ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="150px">
      <el-form-item label="门店" prop="store_id" required>
        <picker-view type="store" v-model="ruleForm.store_id" @change="changeStore" tips="请选择门店"></picker-view>
      </el-form-item>

      <el-form-item label="套餐" prop="package_id" required v-if="ruleForm.store_id > 0">
        <el-select v-model="ruleForm.package_id" placeholder="请选择套餐">
          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="入住天数" prop="check_time">
        <el-input type="" v-model="ruleForm.check_time" placeholder="请输入入住天数"></el-input>
      </el-form-item>
<!-- 
      <el-form-item label="离店时间" prop="end_time" required>
        <el-date-picker v-model="ruleForm.end_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择离店时间"
        ></el-date-picker>
      </el-form-item> -->

      <el-form-item label="签约时间" prop="sign_date" required>
        <el-date-picker v-model="ruleForm.sign_date" type="date" value-format="yyyy-MM-dd" placeholder="请选择签单时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="合同总额" prop="totals" required>
        <el-input type="number" v-model="ruleForm.totals" placeholder="请输入合同总金额"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入订单备注信息"></el-input>
      </el-form-item>

      <el-form-item label="合同附件" prop="files" required>
        <upload-files ref="filesRef" v-model="ruleForm.files"></upload-files>
      </el-form-item>

      <div class="fixed-bottom" style="width: 30vw">
        <el-button type="primary" @click="submit">提交并保存</el-button>
      </div>
    </el-form>
  </el-drawer>
</template>

<script>
import pickerView from '@/components/picker/select.vue'
import uploadFiles from '@/components/upload/files.vue'
import {
  doUpdateBomApi
} from '@/api/order/order.js'

import { getPackageListApi } from '@/api/system/dictionary/package.js'

const ruleForm = {
  store_id: '',
  package_id: '',
  start_time: '',
  end_time: '',
  sign_date: '',
  totals: '',
  remark: '',
  files: [],
  check_time:''
}

export default {
  components: {
    pickerView,
    uploadFiles
  },
  data() {
    return {
      formDrawer: {
        title: '编辑订单信息',
        visible: false
      },
      ruleForm: JSON.parse(JSON.stringify(ruleForm)),
      rules: {
        store_id: [{
          required: true,
          message: '请选择门店'
        }],
        package_id: [{
          required: true,
          message: '请选择套餐'
        }],
        sign_date: [{
          required: true,
          message: '请选择签约时间'
        }],
        totals: [{
          required: true,
          message: '请录入合同金额',
          trigger: 'blur'
        }],
        files: [{
          required: true,
          message: '请上传合同凭证'
        }]
      },
      packageList: []
    }
  },
  methods: {
    showDrawer(bom) {
      this.ruleForm = bom
      this.formDrawer.visible = true
      this.$nextTick(() => {
        this.$refs['filesRef'].setFileList(bom.files)
      })
    },
    closeDrawer() {
      this.formDrawer.visible = false
    },
    changeStore(e) {
      if (e.id > 0) {
        getPackageListApi({
          store_id: e.id
        }).then((res) => {
          this.packageList = res.data.list
        })
      } else {
        this.ruleForm.package_id = ''
        this.packageList = []
      }
    },
    getPakageList(store_id) {
      if (store_id <= 0) {
        this.packageList = []
        return
      }
      getPackageListApi({
        store_id: store_id
      }).then((res) => {
        this.packageList = res.data.list
      })
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        doUpdateBomApi(this.ruleForm).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.closeDrawer()
          } else {
            this.$message.warning(res.msg)
          }
        })
      })
    }
  }
}
</script>
